<template>
  <div>
    <h1>{{ t('welcome') }}</h1>
    <p>{{ t('greeting', { name: userName }) }}</p>
    <p>{{ formattedDate }}</p>

    <button>{{ t('button.submit') }}</button>
    <button>{{ t('button.cancel') }}</button>

    <select v-model="currentLanguage" @change="handleLanguageChange">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import { t, changeLanguage } from '@/i18n';

const i18n = inject('i18n');
const currentLanguage = ref('en');
const userName = ref('Jane Smith');

const formattedDate = computed(() => {
  return t('date.formatted', {
    date: new Date(),
    formatParams: {
      date: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }
    }
  });
});

const handleLanguageChange = () => {
  changeLanguage(currentLanguage.value);
};
</script>